<template>
<div class="container">
  <div class="top" style="width:80vw;height:80vh;" ref="chart"></div>
</div>
</template>

<script>
export default {
  name: "top",
  data(){
    return{
      option:{
        title: {
          text: '果茶销量统计',
          subtext: '销量统计'
        },
        xAxis: {
          name: '商品名称',
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          name:'销量',
          type: 'value'
        },
        series: [
          {
            data: [
              120,
              200,
              150,
              80,
              70,
              110,
              130
            ],
            type: 'bar'
          }
        ]
      }
    }
  },
 async mounted() {
   await this.getData()
    this.initCharts()
  },
  created() {

  },
  methods: {
    //getData
   async getData(){
    const res= await this.$http.get('order/goods/sale/statistics')
        if(res.data.status=='success'){
          this.option.xAxis.data=res.data.data.x
          this.option.series[0].data=res.data.data.y
        }else{
           this.$message.error("数据加载失败")
        }
    },
     initCharts(){
       this.$nextTick(function () {

       });
      let myChart = require('echarts').init(this.$refs.chart)
       console.log(this.option)
      myChart.setOption(this.option);
      window.addEventListener("resize",function(){myChart.resize()});
    },
  },
}
</script>

<style scoped lang="scss">
.container{
   padding: 10px;
   background-color: #fff;
   .top {
     background-color: #E9EEF3;
  }
}
</style>